import React, { Component } from 'react';
import axios from './../../axios';
import { Link, withRouter } from 'react-router-dom';
import { Menu, Dropdown, message, Modal } from 'antd';
import { 
	CaretDownOutlined,
	UserOutlined, 
	SettingOutlined, 
	QuestionCircleOutlined,
	LogoutOutlined 
} from '@ant-design/icons';
// import Utils from './../../utils/utils';
import { connect } from 'react-redux';
import { setCookie } from './../../utils/common';
import headimgurl from './../../statics/icon/headimg.svg';
import './index.less';

class UserBox extends Component {
	
	state = {
		show: false,//控制下拉窗口是否展开及三角形箭头方向
		helpVisible: false,//【帮助与反馈】模态框
		userName: "",//登录的用户名
		showBack: false,//后台设置入口
		headimgurl: sessionStorage.getItem("headimgurl"),
	}
	
	//获取下拉的菜单
	getMenu = () => {
		return (
			<Menu onClick={this.handleItemClick}>
				<Menu.Item style={{padding: 0, marginBottom: "4px"}}>
					<div className="user-img-wrap">
						<img src={this.state.headimgurl+"?"+Date.now()} alt="" onError={this.logoImgError} />
						<span>{this.state.userName}</span>
					</div>	
				</Menu.Item>
				<Menu.Item>
					<Link to="/setting/personal/info"><UserOutlined />&nbsp;&nbsp;个人设置</Link>
				</Menu.Item>
				{
					this.state.showBack?<Menu.Divider />:""
				}
				{
					this.state.showBack?
					<Menu.Item>
						<Link to="/setting/back/theme"><SettingOutlined />&nbsp;&nbsp;后台设置</Link>
					</Menu.Item>:""
				}
				<Menu.Divider />
				<Menu.Item key="help">
					<QuestionCircleOutlined />帮助中心
				</Menu.Item>
				<Menu.Divider />
				<Menu.Item key="logout">
					<LogoutOutlined />退&#x3000;&#x3000;出
				</Menu.Item>
			</Menu>
		)
	}

	//点击三角形箭头展开下拉框
	handleUserClick = () => {
		this.setState({
			show: !this.state.show
		})
	}
	
	//点击页面任意位置隐藏下拉框
	HideClick = e => {
		if(!this.userComponent.contains(e.target)){
			this.setState({
				show: false
			})
		}
	}
		
	//下拉的各个菜单点击后隐藏下拉框
	handleItemClick = ({key}) => {
		switch(key){
			case "logout": 
				this.logOut();
				break;
			case "help":
				this.setState({helpVisible: true});
				break;
			default:
				break;
		}
		this.setState({
			show: false
		})
	}
	
	//获取登录的用户信息
	getUser = () => {
		axios.ajax({
			url: "/user/Login/getUserInfo",
			method: "get"
		}).then(res => {
			if(res.result){
				//展示昵称等
				this.setState({
					userName: res.result.nick_name || res.result.user_name
				})
				this.props.changeUsername(res.result.user_name || res.result.user_name);
				sessionStorage.setItem("headimgurl", res.result.head_img_url);
				if(res.result.menu_codes && res.result.menu_codes.length > 0){
					sessionStorage.setItem("backmenu", JSON.stringify(res.result.menu_codes));
					this.setState({
						showBack: true
					})
				}
			}
		})
	}
	
	//验证登录
	loginCheck = () => {
		axios.ajax({
			url: "/User/Login/loginCheck",
			method: "get"
		}).then(res => {
			if(res.result){
				
			}else{
				message.info("请先登录");
				this.props.history.push("/login");
			}
		}).catch(err => {
			this.props.history.push("/login");
		})
	}
	
	//退出登录
	logOut = () => {
		axios.ajax({
			url: "/User/Login/logout",
			method: "get"
		}).then(res => {
			message.success("退出成功");
			//清除登录信息
			document.cookie="login=false";
			setCookie("login", "", -1);
			this.props.history.push("/login");
		}).catch(err => {
			message.error("退出失败");
		})
	}
	
	//头像加载失败
	logoImgError = () => {
		this.setState({
			headimgurl
		})
	}
	
	componentDidMount(){
		//获取登录的用户信息
		const userName = this.state.userName;
		if(!userName){
			this.getUser();
		}
		//点击页面任意位置事件，为了隐藏下拉框
		window.addEventListener("click", this.HideClick);
	}
	
	componentWillUnmount(){
		//组件卸载时同时注销click事件，react写法要求
		window.removeEventListener("click", this.HideClick);
	}
	
	render(){
		return (
			<div 
				className="user-content" 
				ref={userComponent => this.userComponent = userComponent }
			>
				<Dropdown
					overlay={this.getMenu}
					trigger={['click']}
					placement="bottomRight"
					className="user-box"
				>
					<span onClick={this.handleUserClick}>
						<span className="user-name">{this.state.userName}</span>
						<CaretDownOutlined className={ this.state.show ? "show" : "hide"} />
					</span>
				</Dropdown>
				<Modal
					visible={this.state.helpVisible}
					title="帮助与反馈"
					onCancel={()=>{this.setState({helpVisible: false})}}
					footer={null}
				>
					<p>请联系管理员寻求帮助</p>
				</Modal>
			</div>
		)
	}
}

const mapDispatch = (dispatch) => {
	return {
		changeUsername(username){
			dispatch({
				type: "USERNAME",
				username
			})
		}
	}
}

export default connect(null,mapDispatch)(withRouter(UserBox));